<template>
  <el-container>
    <el-header height="48px">
      <i class="el-icon-s-custom"></i>
      角色列表
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        max-height="560"
        border
        style="width: 60%; margin: 0 auto;">
        <el-table-column
          label="id"
          prop="id"
          width="200"
          align="center">
        </el-table-column>
        <el-table-column
          label="角色名"
          prop="name"
          align="center">
        </el-table-column>
        <el-table-column
          align="center" 
          width="180"
          label="操作">
          <!-- <template slot="header">
            <el-button type="success" size="medium" 
              icon="el-icon-plus" circle
              @click="handleAddNew"
              ></el-button>
          </template> -->
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleEditAuthority(scope.$index, scope.row)">编辑权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 编辑权限对话框 -->
    <el-dialog
      title="编辑权限"
      :visible.sync="editAuthorityDialogVisible"
      width="60%">
      <el-container>
        <el-row>
          <el-col :span="6" v-for="item in editAuthorityData" :key="item.id">
            <div class="grid-content bg-purple-light" style="font-size: 16px; height: 42px; line-height: 42px">
              <span>{{item.name}}</span>
              <el-checkbox v-model="item.isCheck" style="margin-left: 8px"></el-checkbox>
            </div>
          </el-col>
        </el-row>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAuthorityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRoleAuthority">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        editAuthorityDialogVisible: false,
        tableData: [],
        needUpdateRoleId: -1,
        authorities: [],
        roleAuthorities: [],
        editAuthorityData: [],
        updateRoleAuthorityData: [],
      }
    },
    methods: {
      getRoleData() {
        this.$axios.get(`http://localhost:8080/admin/ra/allRole`).then(result => {
          if (result.data.code == 200) {
            const allRoleData = result.data.data;
            const fixData = [];
            for (let item of allRoleData) {
              if (item.name != "管理员")
                fixData.push(item);
            }
            this.tableData = fixData;
          }
        });
      },
      getAuthorities() {
        this.$axios.get(`http://localhost:8080/admin/ra/allAuthority`).then(result => {
          if (result.data.code == 200) {
            this.authorities = result.data.data;
          }
        });
      },
      getRoleAuthorities(roleId) {
        this.$axios.get(`http://localhost:8080/admin/ra/authoritiesOfRole/${roleId}`).then(result => {
          if (result.data.code == 200) {
            console.log(result.data.data);
            this.roleAuthorities = result.data.data;
          }
        });
      },
      showEditAuthorityData(roleId) {
        this.$axios.get(`http://localhost:8080/admin/ra/authoritiesOfRole/${roleId}`).then(result => {
          if (result.data.code == 200) {
            this.roleAuthorities = result.data.data;
            this.$axios.get(`http://localhost:8080/admin/ra/allAuthority`).then(result => {
              if (result.data.code == 200) {
                this.authorities = result.data.data;
                this.editAuthorityData = [...this.authorities];
                for (let item of this.editAuthorityData) {
                  this.$set(item, "isCheck", false);
                  for (let roleAuthority of this.roleAuthorities) {
                    if (item.id == roleAuthority.id) {
                      item.isCheck = true;
                      break;
                    }
                  }
                }
                this.editAuthorityDialogVisible = true;
              }
            });
          }
        });
      },
      handleEditAuthority(index, row) {
        this.needUpdateRoleId = row.id;
        this.showEditAuthorityData(this.needUpdateRoleId);
      },
      updateRoleAuthority() {
        this.updateRoleAuthorityData = [];
        for (let item of this.editAuthorityData) {
          if (item.isCheck) {
            this.updateRoleAuthorityData.push(item);
          }
        }
        // let roleId = this.needUpdateRoleId;
        this.$axios.put(`http://localhost:8080/admin/ra/roleAuthority/${this.needUpdateRoleId}`, this.updateRoleAuthorityData).then(result=>{
          this.editAuthorityDialogVisible=false;
          if (result.data.code == 200) {
            this.$message({
              showClose: true,
              message: "权限修改成功"
            });
          } else {
            this.$message.error("权限修改失败");
          }
        });
      }
    },
    mounted() {
      this.getRoleData();
    },
  }
</script>

<style scoped>
  /* 容器样式 */
  .el-header {
    background-color: transparent;
    color: #333;
    text-align: left;
    line-height: 48px;
  }
  
  .el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    border-radius: 8px;
  }
  .el-main .el-pagination{
    margin-top: 20px;
  }
  
  /* 布局样式 */
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 10px;
    padding: 5px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>